<!DOCTYPE html>
<html>
<head>
	<title>Bus/总线/发布订阅/观察者模式</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		
		
	</style>
</head>
<body>
	<div id="app">
		<child >
			<h1 slot="one"> 剑烽</h1>  <!-- 这里是指定哪个插槽加哪些内容，称为俱名插槽 -->
			<h1 slot="two">菲霞</h1>
		</child>  
		
		
	</div>
</body>
<script type="text/javascript">

	Vue.component("child",{
	
		// template:'<div><p>heello</p><slot>默认内容</slot></div>'
		//slot即为插槽，即方便我们灵活向组件添加内容，可加可不加，若不加内容，则会显示slot的默认内容


		//也可以在组件不同位置设置多个插槽，如下设置了两个插槽：
		template:'<div><p>heello</p><slot name="one"></slot><p>my name is</p><slot name="two"></slot></div>'
		//为使在指定插槽上加入指定内容，需给插槽slot添加name值

		
	})
	

	var vm = new Vue({
		el:"#app",
		data:{
	
		},

	})



		
</script>
</html>